import React, {Component} from 'react';
import {
    WingBlank,
    WhiteSpace,
    Toast
} from 'antd-mobile'
import { InputItem, Button} from 'antd-mobile';


import logo from '../../assets/img/logo.jpg'
import './register.less'

class Login extends Component {
    constructor(){
        super();
        this.state={
            username:'',
            password:'',
            rePassword:'',
            hasUsernameError:false,
            hasPasswordError:false,
            hasPasswordNotSameError:false

        };
    }
    onUsernameChange = (username) => {
        this.setState({
            username
        },()=>{
            this.validateUsername();
        });

    };
    onPasswordChange = (password) => {
        this.setState({
            password
        },()=>{
            this.validatePassword();
        })
    };
    onRePasswordChange = (rePassword) => {
        this.setState({
            rePassword
        },()=>{
            this.validatePassword();
            this.validatePasswordIsSame();
        })
    };
    validateUsername(){
        let hasError=!(this.state.username.length>=6&&this.state.username.length<=16)
        if(hasError){
            this.setState({
                hasUsernameError:true
            })
        }else{
            this.setState({
                hasUsernameError:false
            })
        }
    }
    validatePassword(){
        let hasError=!(this.state.password.length>=6&&this.state.password.length<=16)
        if(hasError){
            this.setState({
                hasPasswordError:true
            })
        }else{
            this.setState({
                hasPasswordError:false
            })
        }
    }
    validatePasswordIsSame(){
        let hasError=(!(this.state.password===this.state.rePassword))
        console.log(this.state.password)
        console.log(this.state.rePassword)
        console.log(hasError)
        if(hasError){
            this.setState({
                hasPasswordNotSameError:true
            })
        }else{
            this.setState({
                hasPasswordNotSameError:false
            })
        }
        return !hasError;

    }
    onLogin=()=>{
        const state={ username:this.state.username,password:this.state.password};
        if(this.validatePasswordIsSame()){
            Toast.success('注册成功...',1);
            this.props.history.push('/login');
        }else{
            Toast.fail('两次输入密码不一致，请重新输入');
            this.setState({
                password:'',
                rePassword:''
            })
        }
    };
    onUsernameErrorClick=()=>{
        Toast.fail('用户名必须位6-16位');
    };
    onPasswordErrorClick=()=>{
        Toast.fail('密码必须位6-16位');
    };
    onRePasswordErrorClick=()=>{
        Toast.fail('两次输入密码不一致，请重新输入');
    };
    render() {
        return (
            <WingBlank>
                <WhiteSpace />
                <div className="pro-logo">
                    <img src={logo} alt="yue"/>
                </div>
                <WhiteSpace />
                <InputItem
                    type="text"
                    placeholder="请输入用户名"
                    error={this.state.hasUsernameError}
                    onErrorClick={this.onUsernameErrorClick}
                    onChange={this.onUsernameChange}
                    value={this.state.username}
                >用户名</InputItem>
                <InputItem
                    type="password"
                    placeholder="请输入密码"
                    error={this.state.hasPasswordError}
                    onErrorClick={this.onPasswordErrorClick}
                    onChange={this.onPasswordChange}
                    value={this.state.password}
                >密码</InputItem>
                <InputItem
                    type="password"
                    placeholder="确认密码"
                    error={this.state.hasPasswordNotSameError}
                    onErrorClick={this.onRePasswordErrorClick}
                    onChange={this.onRePasswordChange}
                    value={this.state.rePassword}
                >确认密码</InputItem>
                <WhiteSpace />
                <Button
                    type="primary"
                    onClick={this.onLogin}
                >注  册</Button>
            </WingBlank>


        );
    }
}

export default Login;